<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="EmotionRecognition.css">

    <title>Emotion Detection with Neural Networks</title>
    
    <script src="emotionrecognition/emotionrecognition.nocache.js" type="text/javascript"></script>    
    <script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

	<script type="text/javascript">
		var currentImage = -1;
		var coords = [];
		
		function initJCrop() {
			var loaded = 0;
			var pollForImage = setInterval(function(){
                 if (loaded) {
                 	clearInterval(pollForImage);
                 } else {
                 	if ($("#imgToJCrop").length > 0) {
                 		currentImage++;
                 		loaded = 4;
						$("#imgToJCrop").Jcrop({
							// aspectRatio: 1.5625,
							onChange: storeCoords,
							onSelect: storeCoords
						});
                 	}
                 }
             }, 200);
             
             function storeCoords(c) {
             	coords[currentImage] = [];
             	coords[currentImage][0] = c.x; // startX
				coords[currentImage][1] = c.x2; // endX
				coords[currentImage][2] = c.y; // startY
				coords[currentImage][3] = c.y2; // endY
			}
		}
		
		function getCoords(){
			var coordsString = "";
			for (var i=0; i<coords.length; i++) {
				for (var j=0; j < coords[i].length; j++) {
					coordsString += coords[i][j] + (coords[i].length - 1 != j ? "," : "");
				}
				coordsString += ";";
			}
			return coordsString;
		}
		
		var loaded2 = false;
		var pollForActiveStep = setInterval(function(){
             if (loaded2) {
             	clearInterval(pollForActiveStep);
             } else {
             	if ($("#active_step").length > 0) {
             		loaded2 = true;
             		$("#active_step").click(nextStep);
             	}
             }
         }, 200);
		
		function nextStep(){
			// get current step
			var current = $("#active_step");
			if(current.next().length != 0) {
				// change _current.png to _done.png
				$(current).html($(current).html().replace('_current.png','_done.png'));
				// get rid of 'active_step' id
				$(current).removeAttr("id");
				// get next sibling
				var next = current.next();
				next.attr("id","active_step");
				$(next).html($(next).html().replace('_inactive.png','_current.png'));
				$("#active_step").click(nextStep);
			} else {
				// we've reached all the steps
				return false;
			}
		}
		
 	</script>    
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
    
    <div id="top">
	    <h1>Emotion Detection with Neural Networks</h1>
    	<table id="top_tbl">
    		<tr>
    			<td class="top_steps top_steps_line_bg" id="active_step">
    				<img src="image_assets/1_current.png" style="margin-top: -11px;"/>
    				<p>Upload</p>
    			</td>
    			<td class="top_steps top_steps_line_bg">
    				<img src="image_assets/2_inactive.png" />
    				<p>Training</p>
    			</td>
    			<td class="top_steps top_steps_line_bg">
    				<img src="image_assets/3_inactive.png" />
    				<p>Testing</p>
    			</td>
    			<td class="top_steps top_steps_line_bg">
                    <img src="image_assets/4_inactive.png" />
                    <p>Configuration</p>
                </td>
    			<td class="top_steps">
    				<img src="image_assets/5_inactive.png" style="margin-top: -11px;"/>
    				<p>Results</p>
    			</td>
    		</tr>
    	</table>
    </div>
    <div id="middle">
	    <table width="100%">
	    	<tr>
	    		<td id="panelContainer"></td>
	    	</tr>
	    	<tr>
	    		<td class="continueButtonContainer" id="continueButtonContainer"></td>
	    	</tr>
	    </table>
    </div>
    
  </body>
</html>
